<template>
  <div class="headerPage">
    <img class="zm_imga" src="../../../assets/zmlogo.png">
    <p class="logName">您好！ {{loginUserName}}</p>
    <img class="closeBigData" src="../../../assets/close.png" @click="closePage">
    <div class="select">
      <div class="province">
        <select name="province" @change="chooseProvince($event)">
          <!-- <option :value="item.province" v-for="(item,index) in provinceData">{{item.province}}</option> -->
          <option>河北省</option>
        </select>
        <img class="select_bottom" src="../../../assets/select_bottom.png">
      </div>
      <div class="province">
        <select name="city" @change="chooseCity($event)">
          <!-- <option :value="item.city" v-for="item in cityData">{{item.city}}</option> -->
          <option>石家庄市</option>
        </select>
        <img class="select_bottom" style="opacity: 0.5;" src="../../../assets/select_bottom.png">
      </div>
      <div class="province">
        <select name="area">
          <!-- <option :value="item.area" v-for="item in areaData">{{item.area}}</option> -->
          <option>不限</option>
        </select>
        <img class="select_bottom" style="opacity: 0.5;" src="../../../assets/select_bottom.png">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'headerPage',
    data() {
      return {
        provinceData: [],
        cityData: [],
        areaData: [],
        Area:'china',
        loginUserName: null



      }
    },
    mounted() {
      this.loginUserName = this.$auth.getUsername();
      // this.getArea();
      // console.log(222,this.provinceData)
      // this.cityData = this.provinceData[0].list;
      // this.areaData = this.cityData[0].list;
    },
    methods: {
      closePage() {
        this.$router.push({path:'/'});
      },
      getArea() {
        this.$axios({
          method: 'post',
          url: '/bParkManage/getParkArea',
        }).then((res) => {
          this.provinceData = res.data;
          this.cityData = this.provinceData[0].list;
          this.areaData = this.cityData[0].list;
        })
      },
      chooseProvince(e) {
        let index = e.target.selectedIndex;
        this.cityData = this.provinceData[index].list;
        this.areaData = this.cityData[0].list;
        this.$emit('getMap',this.Area)
      },
      chooseCity(e) {
        let index = e.target.selectedIndex;
        this.areaData = this.cityData[index].list;
      }

    },
  }

</script>

<style scoped>
  * {
    list-style: none;
  }
  .headerPage {
    width: 97.19%;
    height: 72.78%;
    margin-left: 0.89%;
    background-image: url(../../../assets/header.png);
    background-size: 100% 100%;
    position: relative;
  }
  .zm_imga {
   /* height: 43.9%;
    width: 21.97%; */
    margin-left: 2.68%;
    margin-top: 1.5%;
    width: 18%;
    height: 38%;
  }
  .closeBigData {
    position: absolute;
    right: 3.48%;
    bottom: 42.28%;
    width: 2.25%;
    height: 34.96%;

  }
  .logName {
    color: #fff;
    font-size: 2rem;
    position: absolute;
    bottom: 34%;
    right: 8%;
  }
  .select {
    width: 28.3%;
    height: 47.15%;
    position: absolute;
    left: 45.82%;
    bottom: 4.07%;
    display: flex;
    justify-content: space-between;
  }
  .select div {
   background-image: url(../../../assets/select.png);
   background-size: 100% 100%;
   height: 100%;
   width: 33%;
   display: inline-block;
   position: relative;
   text-align: center;
  }
  .select_bottom {
    width: 86.36%;
    position: absolute;
    left: 0;
    bottom: 4.07%;
  }
  select {
     background-color: transparent;
     color: #f3f3f3;
     border: none;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     letter-spacing: 2px;
     font-size: 2.2rem;
     font-family: PingFang-SC-Medium;
     outline:none;
     padding:0 20px;
     height: 84%;
   }
   select option {
     background-color: transparent;
     color: #f3f3f3;
     margin-top: 20px;
     background-color: rgba(18,53,82,1);
   }
   .select_option {
     color: #f3f3f3;
     font-size: 2.2rem;
     padding-inline-start: 0;
   }
   .select_option li {
     margin: 5px 0;
     border: 1px solid red;
   }
   .select_option li:hover {
     cursor: pointer;
   }



</style>
